<template>
  <div>
    <Treeselect
      :appendToBody="true"
      v-model="value == 0?null: value"
      show-checkbox
      default-expand-all
      highlight-current
      :options="treeData"
      no-results-text="暂无数据"
      :normalizer="normalizer"
      no-options-text="暂无数据"
      :style="{width:width}"
      :default-expand-level="2"
      placeholder="请选择"
      @select="select"
      :zIndex="Zindex"
    />
  </div>
</template>

<script>
import request from '@/utils/request'
import { Notification } from 'element-ui'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  props: {
    value: {
      type: [String, Number, Array],
      default: null
    },
    form: {
      type: Object,
      default: () => {
        return null
      }
    },
    businessAttr: {
      type: [String,Number],
      default: null
    },
    /* 编辑时的初始值 */
    initValue: {
      type: [String,Number],
      default: null
    },
    /* 关键字 */
    keyword: {
      type: [String,Number],
      default: ''
    },
    width: {
      type: [String,Number],
      default: '100%'
    },
    Zindex: {
      type:[String,Number],
      default:9999999
    }
  },
  data() {
    return {
      treeData: [],
      deptId: null,
      normalizer(node) {
        if (node.children == null || node.children === 'null') {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      }
    }
  },
  watch: {
    initValue() {
      this.value = this.value==0? null : this.value
      this.remoteMethod('')
    },
    value(){
      // console.log('this.value',this.value)
      if(this.value === undefined){
        // this.value = null
        this.$emit('clearData')
      }
    }
  },
  created() {
    //console.log(this.value+"sssbbb333")
    this.remoteMethod('')
  },
  methods: {
    // 请求获取商品数据接口
    ajaxGoods(data) {
      const datas = 'keyword=' + data + '&businessAttr=' + this.businessAttr
      return request({
        url: 'api/jtgDropDown/deptTree?' + datas,
        method: 'GET'
      })
    },
    // 获取远程数据并赋值
    remoteMethod(data) {
      this.ajaxGoods(data).then(res => {
        console.log('    this.获取远程数据并赋值(\'\')',res)
          this.treeData = res.content
      }).catch(e => {
        this.treeData = []
        this.totalnum = 0
        Notification.error({
          title: '部门数据请求失败',
          duration: 5000
        })
      })
    },
    select(node) {
      this.$emit('changeInfoId', node)
      this.form[this.keyword] = node.id
    }
  }
}
</script>

